$(document).ready(function() {
    $('input[name="IsSetType"]').change(function() {
        e_d_node(this.value);
    });

    var checked_radio_value = $('input[name="IsSetType"]').val();
    e_d_node(checked_radio_value);

    $('#inputFormPost').validate({
        rules: {
            BaseSKUName: {
                required: true
            },
            MixSetTOPSKU: {
                required: true
            },
            MixSetBOTTOMSKU: {
                required: true
            },
            "Sizes[]": {
                required: true
            }
        },
        messages: {
            BaseSKUName: {
                required: "Please enter Base SKU Name"
            },
            MixSetTOPSKU: {
                required: "Please enter Mix Set TOP SKU"
            },
            MixSetBOTTOMSKU: {
                required: "Please enter Mix Set BOTTOM SKU"
            },
            "Sizes[]": {
                required: "Please select at least one size"
            }
        }
    });

    //size list
    $('#editListSizesBtn').click(function() {
        $('#fm_edit_size_list .list').html('');
        var item = '';
        $('#sizeList option').each(function() {
            var myArray = $(this).val().split('{|}');
            item += '<div class="one-item">';
            item += '<input class="value" type="text" value="' + myArray[0] + '"/>';
            item += '<input class="name" type="text" value="' + $(this).text() + '"/>';
            item += '<a href="javascript:void(0);" class="mgleft10 delete">Delete</a></div>';
        });
        $('#fm_edit_size_list .list').html(item);

        $("#fm_edit_size_list").dialog({
            create: function(event, ui) {
                var widget = $(this).dialog("widget");
            },
            close: function(event, ui) {

            },
            draggable: false,
            modal: true,
            width: 530,
            title: "Edit Size List",
            position: {
                my: "center",
                at: "center"
            }
        });
    });

    $('#fm_edit_size_list .list').on('click', '.delete', function() {
        $(this).parent('.one-item').remove();
    });
    $('#fm_edit_size_list').on('click', '.add-more', function() {
        var item = '<div class="one-item">';
        item += '<input class="value" type="text" value=""/>';
        item += '<input class="name" type="text" value=""/>';
        item += '<a href="javascript:void(0);" class="mgleft10 delete">Delete</a></div>';
        $('#fm_edit_size_list .list').append(item);
    });
    $('#closeSizeList').click(function() {
        $("#fm_edit_size_list").dialog('close');
    });
    $('#updateSizeList').click(function() {
        var optionList = '';
        var save_data = new Array();
        $('#fm_edit_size_list .list .one-item').each(function() {
            var valueItem = $(this).children('.value').val();
            var valueName = $(this).children('.name').val();
            save_data.push(new Array(valueItem, valueName));
            optionList += '<option value="' + valueItem + '{|}' + valueName + '">' + valueName + '</option>';
        });
        $.post("saveOptions.php", {
            data_options: save_data, 
            type_data: 'sizes'
        });
        $('#sizeList').html(optionList);
        $("#fm_edit_size_list").dialog('close');
    });


    //color list
    $('#editListColorsBtn').click(function() {
        $('#fm_edit_color_list .list').html('');
        var item = '';
        $('#colorList option').each(function() {
            var myArray = $(this).val().split('{|}');
            item += '<div class="one-item">';
            item += '<input class="value" type="text" value="' + myArray[0] + '"/>';
            item += '<input class="name" type="text" value="' + $(this).text() + '"/>';
            item += '<a href="javascript:void(0);" class="mgleft10 delete">Delete</a></div>';
        });
        $('#fm_edit_color_list .list').html(item);

        $("#fm_edit_color_list").dialog({
            create: function(event, ui) {
                var widget = $(this).dialog("widget");
            },
            close: function(event, ui) {

            },
            draggable: false,
            modal: true,
            width: 530,
            title: "Edit Color List",
            position: {
                my: "center",
                at: "center"
            }
        });
    });

    $('#fm_edit_color_list .list').on('click', '.delete', function() {
        $(this).parent('.one-item').remove();
    });
    $('#fm_edit_color_list').on('click', '.add-more', function() {
        var item = '<div class="one-item">';
        item += '<input class="value" type="text" value=""/>';
        item += '<input class="name" type="text" value=""/>';
        item += '<a href="javascript:void(0);" class="mgleft10 delete">Delete</a></div>';
        $('#fm_edit_color_list .list').append(item);
    });
    $('#closeColorList').click(function() {
        $("#fm_edit_color_list").dialog('close');
    });
    $('#updateColorList').click(function() {
        var optionList = '';
        var save_data = new Array();
        $('#fm_edit_color_list .list .one-item').each(function() {
            var valueItem = $(this).children('.value').val();
            var valueName = $(this).children('.name').val();
            save_data.push(new Array(valueItem, valueName));
            optionList += '<option value="' + valueItem + '{|}' + valueName + '">' + valueName + '</option>';
        });

        $.post("saveOptions.php", {
            data_options: save_data, 
            type_data: 'colors'
        });
        $('#colorList').html(optionList);
        $("#fm_edit_color_list").dialog('close');
    });

    //bullet point
    $('#editListBulletBtn').click(function() {
        $('#fm_edit_bullet_point_list .list').html('');
        var item = '';
        $('#AMZBullerPoint1 option').each(function() {
            var myArray = $(this).val();
            if (myArray != '') {
                item += '<div class="one-item">';
                item += '<input class="value" type="text" value="' + myArray + '"/>';
                item += '<a href="javascript:void(0);" class="mgleft10 delete">Delete</a></div>';
            }
        });
        $('#fm_edit_bullet_point_list .list').html(item);

        $("#fm_edit_bullet_point_list").dialog({
            create: function(event, ui) {
                var widget = $(this).dialog("widget");
            },
            close: function(event, ui) {

            },
            draggable: false,
            modal: true,
            width: 530,
            title: "Edit Bullet Point List",
            position: {
                my: "center",
                at: "center"
            }
        });
    });

    $('#fm_edit_bullet_point_list .list').on('click', '.delete', function() {
        $(this).parent('.one-item').remove();
    });

    $('#fm_edit_bullet_point_list').on('click', '.add-more', function() {
        var item = '<div class="one-item">';
        item += '<input class="value" type="text" value=""/>';
        item += '<a href="javascript:void(0);" class="mgleft10 delete">Delete</a></div>';
        $('#fm_edit_bullet_point_list .list').append(item);
    });

    $('#updateBulletList').click(function() {
        var optionList = '<option value=""></option>';
        var save_data = new Array();
        $('#fm_edit_bullet_point_list .list .one-item').each(function() {
            var valueItem = $(this).children('.value').val();
            save_data.push(new Array(valueItem));
            optionList += '<option value="' + valueItem + '">' + valueItem + '</option>';
        });

        $.post("saveOptions.php", {
            data_options: save_data, 
            type_data: 'bullet_point'
        });
        $('#AMZBullerPoint1').html(optionList);
        $('#AMZBullerPoint2').html(optionList);
        $('#AMZBullerPoint3').html(optionList);
        $('#AMZBullerPoint4').html(optionList);
        $('#AMZBullerPoint5').html(optionList);
        $("#fm_edit_bullet_point_list").dialog('close');
    });

    $('#closeBulletList').click(function() {
        $("#fm_edit_bullet_point_list").dialog('close');
    });

    //keyword
    $('#editListKeywordBtn').click(function() {
        $('#fm_edit_keyword_list .list').html('');
        var item = '';
        $('#AMZKeyword1 option').each(function() {
            var myArray = $(this).val();
            if (myArray != '') {
                item += '<div class="one-item">';
                item += '<input class="value" type="text" value="' + myArray + '"/>';
                item += '<a href="javascript:void(0);" class="mgleft10 delete">Delete</a></div>';
            }
        });
        $('#fm_edit_keyword_list .list').html(item);

        $("#fm_edit_keyword_list").dialog({
            create: function(event, ui) {
                var widget = $(this).dialog("widget");
            },
            close: function(event, ui) {

            },
            draggable: false,
            modal: true,
            width: 530,
            title: "Edit Keyword List",
            position: {
                my: "center",
                at: "center"
            }
        });
    });
    $('#upLoadBtn').click(function() {
        $('#fm_upLoad .list').html('');
        var item = '';
                item += '<div class="one-item">';
                item += '<input class="value" name="file" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>';
//              item += '<a href="javascript:void(0);" class="mgleft10 delete">Delete</a></div>';
        $('#fm_upLoad .list').html(item);
        $("#fm_upLoad").dialog({
            create: function(event, ui) {
                var widget = $(this).dialog("widget");
            },
            close: function(event, ui) {

            },
            draggable: false,
            modal: true,
            width: 530,
            title: "Up Load File",
            position: {
                my: "center",
                at: "center"
            }
        });
    });
        $('#fm_upLoad').on('click', '.add-more', function() {
        var item = '<div class="one-item">';
        item += '<input name="file" class="value" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>';
//        item += '<a href="javascript:void(0);" class="mgleft10 delete">Delete</a></div>';
        $('#fm_upLoad .list').append(item);
    });
    $('#closeUpLoadList').click(function() {
        $("#fm_upLoad").dialog('close');
    });
    $('#fm_edit_keyword_list .list').on('click', '.delete', function() {
        $(this).parent('.one-item').remove();
    });

    $('#fm_upLoad .list').on('click', '.delete', function() {
        $(this).parent('.one-item').remove();
    });

    $('#fm_edit_keyword_list').on('click', '.add-more', function() {
        var item = '<div class="one-item">';
        item += '<input class="value" type="text" value=""/>';
        item += '<a href="javascript:void(0);" class="mgleft10 delete">Delete</a></div>';
        $('#fm_edit_keyword_list .list').append(item);
    });

    $('#updateKeywordList').click(function() {
        var optionList = '<option value=""></option>';
        var save_data = new Array();
        $('#fm_edit_keyword_list .list .one-item').each(function() {
            var valueItem = $(this).children('.value').val();
            save_data.push(new Array(valueItem));
            optionList += '<option value="' + valueItem + '">' + valueItem + '</option>';
        });

        $.post("saveOptions.php", {
            data_options: save_data, 
            type_data: 'keyword'
        });
        $('#AMZKeyword1').html(optionList);
        $('#AMZKeyword2').html(optionList);
        $('#AMZKeyword3').html(optionList);
        $('#AMZKeyword4').html(optionList);
        $('#AMZKeyword5').html(optionList);
        $("#fm_edit_keyword_list").dialog('close');
    });

    $('#closeKeywordList').click(function() {
        $("#fm_edit_keyword_list").dialog('close');
    });
    
    //images html
    $('.viewImagesHTMLSetBtn').click(function() {
        $('#fm_images_html_list .list').html('');
        var item = '';        
        var sku = $('input[name=BaseSKUName]').val();
        var sku_top = $('input[name=MixSetTOPSKU]').val();
        var sku_bottom = $('input[name=MixSetBOTTOMSKU]').val();
        var i_w = $('input[name=imgWidth]').val();
        var set_type = $('input[name=IsSetType]:radio:checked').val();
        var base_url = $('input[name=ImageBase]').val();
        var c_selected = $("#colorList").val() || [];        
        switch (set_type){
            case 'IsBikiniSet':
                if(sku=='' || base_url ==''){
                    item = 'You must input sku and base image url first.';
                }else{
                    if(c_selected.length>0){
                        for(var i=0; i< c_selected.length; i++ ){
                            var myArray = c_selected[i].split('{|}');
                            item+='<p><img src="'+base_url+'/images/'+sku+'-'+myArray[0]+'-SET-Front.jpg" width="'+i_w+'" height="auto></p>\n';
                            item+='<p><img src="'+base_url+'/images/'+sku+'-'+myArray[0]+'-SET-Back.jpg" width="'+i_w+'" height="auto></p>\n';
                        }                      
                    }else{                        
                        item+='<p><img src="'+base_url+'/images/'+sku+'-SET-Front.jpg" width="'+i_w+'" height="auto></p>\n';
                        item+='<p><img src="'+base_url+'/images/'+sku+'-SET-Back.jpg" width="'+i_w+'" height="auto></p>\n';
                    }
                }                
                break;
            case 'IsMixSet':
                if(sku_top=='' || sku_bottom=='' || base_url ==''){
                    item = 'You must input sku and base image url first.';
                }else{
                    if(c_selected.length>0){
                        for(var i=0; i< c_selected.length; i++ ){
                            var myArray = c_selected[i].split('{|}');
                            item+='<p><img src="'+base_url+'/images/'+sku_top+'-'+sku_bottom+'-'+myArray[0]+'-SET-Front.jpg" width="'+i_w+'" height="auto></p>\n';
                            item+='<p><img src="'+base_url+'/images/'+sku_top+'-'+sku_bottom+'-'+myArray[0]+'-SET-Back.jpg" width="'+i_w+'" height="auto></p>\n';
                        }                        
                    }else{
                        for(var j=0; j<p_t.length; j++){
                            item+='<p><img src="'+base_url+'/images/'+sku_top+'-'+sku_bottom+'-SET-Front.jpg" width="'+i_w+'" height="auto></p>\n';
                            item+='<p><img src="'+base_url+'/images/'+sku_top+'-'+sku_bottom+'-SET-Back.jpg" width="'+i_w+'" height="auto></p>\n';
                        }
                    }
                }                
                break;
        }
        
        
        $('#fm_images_html_list .list').val(item);

        $("#fm_images_html_list").dialog({
            create: function(event, ui) {
                var widget = $(this).dialog("widget");
            },
            close: function(event, ui) {

            },
            draggable: false,
            modal: true,
            width: 900,
            title: "Images HTML List",
            position: {
                my: "center",
                at: "center"
            }
        });
    });
    
    $('.viewImagesHTMLTopBtn').click(function() {
        $('#fm_images_html_list .list').html('');
        var item = '';        
        var sku = $('input[name=BaseSKUName]').val();
        var sku_top = $('input[name=MixSetTOPSKU]').val();
        var sku_bottom = $('input[name=MixSetBOTTOMSKU]').val();
        var i_w = $('input[name=imgWidth]').val();
        var set_type = $('input[name=IsSetType]:radio:checked').val();
        var base_url = $('input[name=ImageBase]').val();
        var c_selected = $("#colorList").val() || [];        
        switch (set_type){
            case 'IsBikiniSet':
                if(sku=='' || base_url ==''){
                    item = 'You must input sku and base image url first.';
                }else{
                    if(c_selected.length>0){
                        for(var i=0; i< c_selected.length; i++ ){
                            var myArray = c_selected[i].split('{|}');
                            item+='<p><img src="'+base_url+'/images/'+sku+'-'+myArray[0]+'-T-Front.jpg" width="'+i_w+'" height="auto></p>\n';
                            item+='<p><img src="'+base_url+'/images/'+sku+'-'+myArray[0]+'-T-Back.jpg" width="'+i_w+'" height="auto></p>\n';
                        }                      
                    }else{                        
                        item+='<p><img src="'+base_url+'/images/'+sku+'-T-Front.jpg" width="'+i_w+'" height="auto></p>\n';
                        item+='<p><img src="'+base_url+'/images/'+sku+'-T-Back.jpg" width="'+i_w+'" height="auto></p>\n';
                    }
                }                
                break;
        }
        
        
        $('#fm_images_html_list .list').val(item);

        $("#fm_images_html_list").dialog({
            create: function(event, ui) {
                var widget = $(this).dialog("widget");
            },
            close: function(event, ui) {

            },
            draggable: false,
            modal: true,
            width: 900,
            title: "Images HTML List",
            position: {
                my: "center",
                at: "center"
            }
        });
    });
    
    $('.viewImagesHTMLBottomBtn').click(function() {
        $('#fm_images_html_list .list').html('');
        var item = '';        
        var sku = $('input[name=BaseSKUName]').val();
        var sku_top = $('input[name=MixSetTOPSKU]').val();
        var sku_bottom = $('input[name=MixSetBOTTOMSKU]').val();
        var i_w = $('input[name=imgWidth]').val();
        var set_type = $('input[name=IsSetType]:radio:checked').val();
        var base_url = $('input[name=ImageBase]').val();
        var c_selected = $("#colorList").val() || [];        
        switch (set_type){
            case 'IsBikiniSet':
                if(sku=='' || base_url ==''){
                    item = 'You must input sku and base image url first.';
                }else{
                    if(c_selected.length>0){
                        for(var i=0; i< c_selected.length; i++ ){
                            var myArray = c_selected[i].split('{|}');
                            item+='<p><img src="'+base_url+'/images/'+sku+'-'+myArray[0]+'-B-Front.jpg" width="'+i_w+'" height="auto></p>\n';
                            item+='<p><img src="'+base_url+'/images/'+sku+'-'+myArray[0]+'-B-Back.jpg" width="'+i_w+'" height="auto></p>\n';
                        }                      
                    }else{                        
                        item+='<p><img src="'+base_url+'/images/'+sku+'-B-Front.jpg" width="'+i_w+'" height="auto></p>\n';
                        item+='<p><img src="'+base_url+'/images/'+sku+'-B-Back.jpg" width="'+i_w+'" height="auto></p>\n';
                    }
                }                
                break;
        }
        
        
        $('#fm_images_html_list .list').val(item);

        $("#fm_images_html_list").dialog({
            create: function(event, ui) {
                var widget = $(this).dialog("widget");
            },
            close: function(event, ui) {

            },
            draggable: false,
            modal: true,
            width: 900,
            title: "Images HTML List",
            position: {
                my: "center",
                at: "center"
            }
        });
    });
    
    $('.viewImagesHTMLOnePieceBtn').click(function() {
        $('#fm_images_html_list .list').html('');
        var item = '';        
        var sku = $('input[name=BaseSKUName]').val();
        var sku_top = $('input[name=MixSetTOPSKU]').val();
        var sku_bottom = $('input[name=MixSetBOTTOMSKU]').val();
        var i_w = $('input[name=imgWidth]').val();
        var set_type = $('input[name=IsSetType]:radio:checked').val();
        var base_url = $('input[name=ImageBase]').val();
        var c_selected = $("#colorList").val() || [];        
        switch (set_type){
            case 'IsOnePiece':
                if(sku=='' || base_url ==''){
                    item = 'You must input sku and base image url first.';
                }else{
                    if(c_selected.length>0){
                        for(var i=0; i< c_selected.length; i++ ){
                            var myArray = c_selected[i].split('{|}');
                            item+='<p><img src="'+base_url+'/images/'+sku+'-'+myArray[0]+'-Front.jpg" width="'+i_w+'" height="auto></p>\n';
                            item+='<p><img src="'+base_url+'/images/'+sku+'-'+myArray[0]+'-Back.jpg" width="'+i_w+'" height="auto></p>\n';
                        }                      
                    }else{                        
                        item+='<p><img src="'+base_url+'/images/'+sku+'-Front.jpg" width="'+i_w+'" height="auto></p>\n';
                        item+='<p><img src="'+base_url+'/images/'+sku+'-Back.jpg" width="'+i_w+'" height="auto></p>\n';
                    }
                }                
                break;
        }
        
        
        $('#fm_images_html_list .list').val(item);

        $("#fm_images_html_list").dialog({
            create: function(event, ui) {
                var widget = $(this).dialog("widget");
            },
            close: function(event, ui) {

            },
            draggable: false,
            modal: true,
            width: 900,
            title: "Images HTML List",
            position: {
                my: "center",
                at: "center"
            }
        });
    });

    $('#closeImagesHTMLList').click(function() {
        $("#fm_images_html_list").dialog('close');
    });

    //submit form
    $('.buttons button').click(function() {
        $('#actionForm').val($(this).attr('data-action'));
        $('#inputFormPost').submit();
    });
});

function e_d_node(r_value) {
    switch (r_value) {
        case 'IsBikiniSet':
            $('.bikini_mix_set').removeAttr('disabled');
            $('.bikini_onepiece_set').removeAttr('disabled');
            $('.bikini_set_only').removeAttr('disabled');
            $('.onepiece_set_only').attr('disabled', 'disabled');
            $('.mix_set_only').attr('disabled', 'disabled');
            break;
        case 'IsMixSet':
            $('.bikini_mix_set').removeAttr('disabled');
            $('.mix_set_only').removeAttr('disabled');
            $('.bikini_set_only').attr('disabled', 'disabled');
            $('.bikini_onepiece_set').attr('disabled', 'disabled');
            $('.onepiece_set_only').attr('disabled', 'disabled');
            break;
        case 'IsOnePiece':
            $('.bikini_onepiece_set').removeAttr('disabled');
            $('.onepiece_set_only').removeAttr('disabled');
            $('.bikini_mix_set').attr('disabled', 'disabled');
            $('.bikini_set_only').attr('disabled', 'disabled');
            $('.mix_set_only').attr('disabled', 'disabled');
            break;
    }
}